<template>
    <div>
        <div style="display: flex;justify-content: space-between;">
            <a-button v-userAuth="'H1-2'" type='primary' @click="handleCreate">
                <Iconfont class="icon button-icon-style" type="icon-new16f"></Iconfont>
                {{ $t('创建策略') }}
            </a-button>
            <div class="flex">
                <div class="mt-4" style="width: 80px;">{{ $t('名称') }}：</div>
                <a-input v-model="input" :placeholder="$t('Enter') + $t('名称')" />
                <a-button type='primary' class="ml-8" @click="handleSearch">
                    <Iconfont class="icon button-icon-style" type="icon-search16f"></Iconfont>
                    {{ $t('查询') }}
                </a-button>
            </div>
        </div>
        <a-table class="bigstyle mt-16" rowKey="id" :columns='columns' :loading="loading"
            :dataSource='dataList' :locale="defaultSetting" :pagination='pagination' size='small' :scroll="{ x: 1200 }">
            <template slot="state" slot-scope="state">
                <div v-if="state == '1'">
                    <span class="dot successBg"></span>
                    <span class="ml-18">{{ $t('健康') }}</span>
                </div>
                <div v-if="state == '2'">
                    <span class="dot failBg"></span>
                    <span class="ml-18">{{ $t('异常') }}</span>
                </div>
            </template>
            <!-- 策略计划 -->
            <template slot="plan" slot-scope='text, record'>
                <div>
                    <!-- <div> -->
                    <a-tag v-if="record.raw_cycle_type" :class="cycleTypeColor.get(record.raw_cycle_type)">{{
                        cycleType.get(record.raw_cycle_type) }}</a-tag>
                    <span v-if="Array.isArray(record.raw_cycles)" class="mr-10">{{ record.raw_cycles.join(',') }}</span>
                    <!-- </div> -->
                    <!-- 时间段 -->
                    <span v-if="record.raw_time_type == '1'">
                        <span class="mr-16" v-if="record.raw_start_time && record.raw_end_time">{{
                            record.raw_start_time }} - {{ record.raw_end_time }}</span>
                        <span v-if="record.raw_every_few_type == '1'">{{ $t('每') }}{{ record.raw_every_few
                            }}{{ $t('分钟') }}{{ $t('执行一次') }}</span>
                        <span v-if="record.raw_every_few_type == '2'">{{ $t('每') }}{{ record.raw_every_few
                            }}{{ $t('小时') }}{{ $t('执行一次') }}</span>
                    </span>
                    <!-- 时间点 -->
                    <span v-if="record.raw_time_type == '2'">
                        <span>{{ record.raw_time }}</span>
                        <span>{{ $t('执行一次') }}</span>
                    </span>
                </div>
            </template>
            <template slot="operate" slot-scope='text, record'>
                <div style="display: flex;" v-userAuth="'H1-2'">
                    <a-tooltip placement='top'>
                        <template slot='title'>
                            <span>{{ $t('Edit') }}</span>
                        </template>
                        <Iconfont class="icon table-operation-icon" type="icon-edit16f" @click="handleEdit(record)">
                        </Iconfont>
                    </a-tooltip>
                    <a-tooltip placement='top'>
                        <template slot='title'>
                            <span>{{ $t('Delete') }}</span>
                        </template>
                        <Iconfont class="icon table-operation-icon" type="icon-delete16f"
                            @click="handleDelete(record.name, record.id)">
                        </Iconfont>
                    </a-tooltip>
                </div>
            </template>
        </a-table>

        <blockCreate ref="createRef" @get-list="getList" />
        <blockModify ref="modifyRef" @get-list="getList" />

    </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import blockCreate from './blockCreate'
import blockModify from './blockModify'

export default {
    components: { EmptyData, blockCreate, blockModify },
    data() {
        return {
            loading: false,
            dataList: [],
            copyList: [],
            defaultSetting: { emptyText: <EmptyData /> },
            pagination: {
                defaultPageSize: 10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['10', '20', '30', '40', '50', '100', ],
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            columns: [
                { title: this.$t('策略名称'), dataIndex: 'name', key: 'name', width: 280, fixed: 'left' },
                { title: this.$t('保护策略') + this.$t('Detail'), scopedSlots: { customRender: 'plan' } },
                { title: this.$t('Operate'), key: "operate", scopedSlots: { customRender: 'operate' }, width: 160, fixed: 'right' }
            ],
            input: '',
            cycleType: new Map([
                [1, "每日"],
                [2, "每周"],
                [3, "每月"],
            ]),
            cycleTypeColor: new Map([
                [1, "blueColor"],
                [2, "greenColor"],
                [3, "purpleColor"],
            ]),
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        async getList() {
            this.loading = true
            const { data } = await this.$api.data.getStrategyListApi({ target_type: 1, strategy_type: 3 })
            this.dataList = data
            this.copyList = data
            this.loading = false
        },
        handleSearch() {
            const list = []; // 用于存放搜索出来数据的新数组
            if (this.input) {
                this.copyList.filter((item) => {
                    if (item.name.indexOf(this.input) !== -1) {
                        list.push(item);
                    }
                });
                this.dataList = list;
            } else {
                this.dataList = this.copyList
            }
        },
        handleCreate() {
            this.$refs.createRef.isShow = true
        },
        handleEdit(item) {
            if(item.raw_cycle_type == 3){
                this.$refs.modifyRef.getMonthList = item.raw_cycles
                this.$refs.modifyRef.isMonth = true
            } 
            this.$refs.modifyRef.form = { ...item }
            this.$refs.modifyRef.isShow = true
        },
        async handleDelete(name, id) {
            this.loading = true
            let _this = this
            this.$confirm({
                title: this.$t('Delete') + this.$t('保护策略'),
                content: this.$t('Delete') + this.$t('保护策略') + `${name}` + this.$t('后，将无法恢复！您确定要删除吗？'),
                cancelText: this.$t('Cancel'),
                okText: this.$t('Sure'),
                okType: 'danger',
                icon: 'close-circle',
                async onOk() {
                    const { data } = await _this.$api.data.deleteStrategyCopyApi(id)
                    _this.model(data.id) //返回模板
                    _this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') _this.getList()
                },
                onCancel() {
                }
            })
            this.loading = false
        }
    }
}
</script>
<style scoped>
.blueColor {
    /* width: 50px;
    height: 24px; */
    color: #006db8;
    background-color: rgb(0, 109, 184, 8%);
    text-align: center;
    border-radius: 4px;
    border: solid 1px #006db8;
}

.purpleColor {
    /* width: 50px;
    height: 24px; */
    color: #6634b3;
    background-color: rgb(102, 52, 179, 8%);
    text-align: center;
    border-radius: 4px;
    border: solid 1px #6634b3;
}

.greyColor {
    /* width: 65px;
	height: 24px; */
    color: #666666;
    background-color: rgb(102, 102, 102, 8%);
    text-align: center;
    border-radius: 4px;
    border: solid 1px #666666;
}

.greenColor {

    background-color: #ebf7f9;
    border-radius: 4px;
    border: solid 1px #059db3;
}
</style>